<script setup lang="ts">
import { ref } from 'vue';

const destinations = ref([
  { 
    id: 1, 
    name: '巴黎', 
    description: '浪漫之都，艺术与美食的天堂', 
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.2VHDqVPWo7CvCYWMiGdbUAHaE7?rs=1&pid=ImgDetMain',
    price: '¥ 8,999'
  },
  { 
    id: 2, 
    name: '圣托里尼', 
    description: '爱琴海上的蓝白小岛', 
    image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.HdEzX5vIeeK1PtqOJenbfQHaFj?rs=1&pid=ImgDetMain',
    price: '¥ 12,999'
  },
  { 
    id: 3, 
    name: '东京', 
    description: '现代与传统交融的都市', 
    image: 'https://img95.699pic.com/photo/30778/0861.jpg_wh860.jpg',
    price: '¥ 6,999'
  },
  { 
    id: 4, 
    name: '马尔代夫', 
    description: '梦幻般的海上天堂', 
    image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.OnK-9lHF5cM9N3b9Bh9VHAHaFj?rs=1&pid=ImgDetMain',
    price: '¥ 15,999'
  }
]);
</script>

<template>
  <section>
    <h2 class="section-title">热门目的地</h2>
    <div class="destination-grid">
      <div v-for="dest in destinations" :key="dest.id" class="destination-card">
        <div class="destination-image">
          <img :src="dest.image" :alt="dest.name" />
        </div>
        <div class="destination-info">
          <h3 class="destination-name">{{ dest.name }}</h3>
          <p class="destination-desc">{{ dest.description }}</p>
          <div class="destination-price">{{ dest.price }} 起</div>
          <button class="view-details-btn">查看详情</button>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.section-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 50px 0 30px;
}

.destination-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.destination-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.destination-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.destination-image {
  height: 180px;
  overflow: hidden;
}

.destination-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.destination-card:hover .destination-image img {
  transform: scale(1.05);
}

.destination-info {
  padding: 15px;
}

.destination-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.destination-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.destination-price {
  color: #ff3b30;
  font-weight: bold;
  margin-bottom: 10px;
}

.view-details-btn {
  width: 100%;
  padding: 8px 0;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.view-details-btn:hover {
  background-color: #0055aa;
}
</style>